/**
 * 说明文档 https://jinxi1334640772.github.io/tools/package/Lottie
 * 安装基础依赖 pnpm add lottie-web
*/

import lottie from "lottie-web";

export default {
    install (app) {
        app.directive('lottie', {
            mounted: (el, binding) => {
                const anim = lottie.loadAnimation({
                    // 要渲染动画的 DOM 元素（必需）
                    container: el,
                    // 包含导出的动画数据的对象
                    animationData: binding?.value,
                    // 'svg' / 'canvas' / 'html' 来设置渲染器（必需）
                    renderer: 'svg',
                    // 渲染器设置
                    rendererSettings: {
                        scaleMode: 'noScale',
                        // svg可用：在需要时加载dom元素，加快大量元素的初始化速度
                        progressiveLoad: false,
                        // svg可用：当透明度为0时隐藏元素
                        hideOnTransparent: true
                    },
                    // 是否循环播放
                    loop: false,
                    // 准备好后立即开始播放
                    autoplay: true,
                    // 动画名称以供将来参考
                    // name: "Hello World",
                })
                el.classList.add('cursor-pointer')
                el.addEventListener('mouseenter', (e) => {
                    anim.goToAndPlay(5, true)
                })
                el.addEventListener('mouseleave', (e) => {
                    anim.goToAndStop(20, true)
                })
            }
        })
    }
}
